<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>


  		<form action="${param.action}" name="ksr-customer-signup-form" class="form ${param.mode}" method="post" role="form">
  		<c:choose>
  			<c:when test="${not empty param.mode and param.mode eq 'view'}">
		  		<c:set var="field_property" value="disabled" scope="request"/>
  			</c:when>
  			<c:otherwise>
		  		<c:set var="field_property" value="" scope="request"/>
  			</c:otherwise>
  		</c:choose>
  		
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="firstName" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="firstName" class="label table-cell text-left">First Name:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${customer.firstName}" name="firstName" id="firstName" class="text-field required full-width font-16 form-control" placeholder="First name" ${field_property}/>
	  			</div>
  			</div>
  		</div>
  		
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="lastName" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="lastName" class="label table-cell text-left">Last Name:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${customer.lastName}" name="lastName" id="lastName" class="text-field required full-width font-16 form-control" placeholder="Last name" ${field_property}/>
	  			</div>
  			</div>
  		</div>
  		
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="dateOfBirth" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="dateOfBirth" class="label table-cell text-left">Birthday:</label>
	  			<div class="table-cell">
	  				<input type="text" value='<fmt:formatDate pattern="MM/dd/yyyy" value="${customer.dateOfBirth}"/>' name="dateOfBirth" class="text-field required date dateNotInFuture dob full-width font-16 form-control" placeholder='Date of birth (Kid)'  ${field_property}/>
	  			</div>
  			</div>
  		</div>
  		
  		
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="phoneNumber" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="phoneNumber" class="label table-cell text-left">Phone:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${customer.phoneNumber}" name="phoneNumber" id="phoneNumber" class="text-field required full-width font-16 form-control" placeholder="Phone Number" ${field_property}/>
	  			</div>
  			</div>
  		</div>
  		
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="interest" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="interest" class="label table-cell text-left">Interest:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${customer.interest}" name="interest" id="interest" class="text-field required full-width font-16 form-control" placeholder="Interest" ${field_property}/>
	  			</div>
  			</div>
  		</div>
  		
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="email" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="email" class="label table-cell text-left">Email:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${customer.email}" name="email" id="email" class="text-field required email full-width font-16 form-control" placeholder="Email" remote="/ksr/check-email.json" ${field_property}/>
	  			</div>
  			</div>
  		</div>
  		
  		<div class="input-item font-16 full-width margin-vertical-half ${param.mode}">
			<c:if test="${not fn:contains(param.mode , 'create')}">
	    		<div class="alert font-15 ${param.mode}">
		    		<fmt:message key="msg.reset-password-desc"/>
	    		</div>	   		
    		</c:if>  		
 			<div class="errContainer  errorMsg">
				<label for="password" class="error"></label>
			</div>
			<div class="full-width table-disp">
				<label for="password" class="label table-cell text-left">Password:</label>
				<div class="table-cell">
		  			<input type="password" value="" name="password" class="full-width font-16 text-field password1 form-control <c:if test="${param.mode eq 'create'}">required</c:if>" ${field_property}/>
	  			</div>
  			</div>
  		</div>
  		
  		<div class="input-item font-16 full-width margin-vertical-half ${param.mode}">
 			<div class="errContainer  errorMsg">
				<label for="password2" class="error"></label>
			</div>
			<div class="full-width table-disp">
				<label for="password2" class="label table-cell text-left">Password2:</label>
				<div class="table-cell">
		  			<input type="password" value="" name="password2" class="full-width font-16 text-field form-control <c:if test="${param.mode eq 'create'}">required</c:if>" equalTo=".password1"  ${field_property}/>
	  			</div>
  			</div>
  		</div>
  
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="addressLine1" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="addressLine1" class="label table-cell text-left">Address L1:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${customer.residentAddress.addressLine1}" name="residentAddress.addressLine1"  id="addressLine1" class="text-field required full-width font-16 form-control" placeholder="Address Line1" ${field_property}/>
	  			</div>
  			</div>
  		</div>  		
  
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="addressLine2" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="addressLine1" class="label table-cell text-left">Address L2:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${customer.residentAddress.addressLine2}" name="residentAddress.addressLine2"  id="addressLine2" class="text-field full-width font-16 form-control" placeholder="Address Line2" ${field_property}/>
	  			</div>
  			</div>
  		</div>  		

  
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="city" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="city" class="label table-cell text-left">City:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${customer.residentAddress.city}" name="residentAddress.city"  id="city" class="text-field required full-width font-16 form-control" placeholder="City" ${field_property}/>
	  			</div>
  			</div>
  		</div> 

  
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="state" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="state" class="label table-cell text-left">State:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${customer.residentAddress.state}" name="residentAddress.state"  id="state" class="text-field required full-width font-16 form-control" placeholder="State" ${field_property}/>
	  			</div>
  			</div>
  		</div> 
  		  		
  
  		<div class="input-item font-16 full-width margin-vertical-half">
  			<div class="errContainer  errorMsg">
				<label for="zip" class="error"></label>
			</div>	
  			<div class="full-width table-disp">
  				<label for="zip" class="label table-cell text-left">Zip:</label>
	  			<div class="table-cell">
	  				<input type="text" value="${customer.residentAddress.zip}" name="residentAddress.zip"  id="zip" class="text-field required full-width font-16 form-control" placeholder="Zip Code" ${field_property}/>
	  			</div>
  			</div>
  		</div> 
  			<div class="clearfix"></div>
    		<div class="submit-button ${param.mode} margin-top">
	    		<button type="submit" class="btn btn-primary">Submit</button>	
	    		<button type="reset" class="btn btn-default"><fmt:message key="msg.reset"/></button>	
    		</div>	
  		</form>
<div class="clear-both"></div>
  <script type="text/javascript" src="/ksr/javascript/customer-signup.js"></script>